<template>
  <div class="activity-wrapper">
    <c-title :hide="false" :text="'活动列表'"></c-title>
    <div class="top">
      <img :src="topBg" class="bg">
      <div class="record" @click="goAwardRecord">抽奖记录</div>
      <div class="content">
        <div class="title">我的冻结积分</div>
        <div class="integral">{{ frozenIntegral }}</div>
      </div>
    </div>
    <div class="activity-list">
      <van-skeleton title :row="3" :loading="getting">
        <van-row gutter="15" v-if="activityList.length">
          <van-col span="12" v-for="item in activityList" :key="item.id">
            <div class="activity">
              <div class="name">{{ item.activity_name }}</div>
              <div class="title">{{ item.integral }}积分</div>
              <div class="time">开始日期：{{ item.start_time }}</div>
              <div class="time">结束日期：{{ item.end_time }}</div>
              <div @click="participateActivity(item)" :class="['footer', 'status' + item.is_satisfy]">
                立即参与
              </div>
            </div>
          </van-col>
        </van-row>
        <van-empty v-else description="暂无活动" />
      </van-skeleton>
    </div>
  </div>
</template>

<script>
import integral_activities_controller from './integral_activities_controller';
export default integral_activities_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.activity-wrapper {
  background-color: #fff;
  padding: 16px;

  .top {
    position: relative;
    color: #fff;
    font-size: 16px;

    .record {
      position: absolute;
      top: 28px;
      right: 24px;
      font-weight: bold;
    }

    .content {
      position: absolute;
      top: 45px;
      left: 24px;

      .integral {
        font-size: 40px;
      }
    }

    .bg {
      width: 100%;
    }
  }

  .activity-list {
    margin-top: 15px;

    .activity {
      background-color: #F9EFE7;
      border-radius: 8px;
      margin-bottom: 15px;
      overflow: hidden;

      .name {
        font-size: 12px;
        color: #333;
        margin-top: 8px;
      }

      .title {
        color: #B0481D;
        font-size: 20px;
        margin: 12px 0;
        margin-top: 4px;
        font-weight: bold;
      }

      .time {
        font-size: 12px;
        color: #333;
        margin-bottom: 4px;
      }

      .footer {
        background-color: #FFEAC6;
        height: 36px;
        margin-top: 9px;
        line-height: 36px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;

        &.status1 {
          color: #B0481D;
        }

        &.status0 {
          color: #999;
        }

        
      }
    }
  }
}
</style>